<template>
  <div class="container">
    <div class="top-mind">
      如果重新指定某个专业/部门的兼职档案专业人员，请及时联系该平台开发人员，更新员工工号。否则会出现提交数字档案预归档数据规范不合格！
    </div>
    <div style="display: flex">
      <div class="left-box">
        <div class="left-top">部门列表</div>
        <!-- <el-menu :default-active="curDpIndex" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item :index="index" v-for="(item, index) in dpData" :key="index">
          <span slot="title">{{ item.archDeptName }}</span>
        </el-menu-item>
      </el-menu> -->
        <el-tabs
          v-model="curDpIndex"
          tab-position="left"
          type="card"
          @tab-click="handleSelect"
        >
          <el-tab-pane
            v-for="(item, index) in dpOptions"
            :key="index"
            :label="item.archDeptName"
            :name="item.index"
          />
        </el-tabs>
      </div>
      <div class="right-box">
        <el-button
          type="primary"
          style="margin: 5px 0"
          size="small"
          @click="handleAdd()"
        >新增员工</el-button>
        <div
          v-show="curDpIndex === '0'"
          style="margin-bottom: 10px; color: #606266; font-size: 15px"
        >
          工号:
          <el-input
            v-model="searchForm.staffCode"
            class="search-input"
            size="small"
            style="width: 20vw"
            placeholder="请输入检索的工号"
            clearable
          />
          姓名:
          <el-input
            v-model="searchForm.staffName"
            class="search-input"
            size="small"
            style="width: 20vw"
            placeholder="请输入检索的姓名"
            clearable
          />
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            style="margin-left: 10px"
            @click="getData()"
          >检索</el-button>
        </div>
        <el-table v-loading="isLoading" :data="staffData" border>
          <el-table-column
            prop="staffCode"
            align="center"
            label="工号"
            width="100"
          />
          <el-table-column prop="staffName" align="center" label="姓名" />
          <el-table-column prop="archDeptName" align="center" label="部门" />
          <el-table-column prop="contactInfo" align="center" label="联系方式" />
          <el-table-column label="角色" align="center" width="200">
            <template slot-scope="scope">
              {{ scope.row.isManager?scope.row.isManager:'' }}{{ scope.row.roleName }}
              <!-- <span v-if="!scope.row.isManager">员工<br /></span>
              <span v-if="!!scope.row.isManager"
                >{{ scope.row.isManager }}主管<br
              /></span>
              <span v-if="!!scope.row.isArch">兼职档案专业人员<br /></span>
              <span v-if="!!scope.row.isKnowPro"
                >知识体系维护专业人员<br
              /></span> -->
            </template>
          </el-table-column>
          <!-- <el-table-column prop="notes" label="备注"> </el-table-column> -->
          <el-table-column label="操作" width="400">
            <template slot-scope="scope">
              <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">重置密码</el-button> -->
              <el-button
                size="mini"
                type="info"
                plain
                @click="handleEdit(scope.row)"
              >编辑信息</el-button>
              <el-button
                size="mini"
                type="danger"
                plain
                @click="handleReset(scope.row)"
              >重置密码</el-button>
              <!-- <el-button
                v-show="!scope.row.isManager"
                size="mini"
                type="primary"
                plain
                @click="setManager(scope.row)"
              >设为部门主管</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            :current-page.sync="page.pageNum"
            :page-sizes="[10, 20, 50]"
            :page-size="page.pageSize"
            layout="sizes, total, prev, pager, next"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <el-dialog :title="title" :visible.sync="staffDialog" width="40%">
      <div>
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="addRules"
          label-position="right"
          label-width="160px"
        >
          <el-form-item label="部门" prop="archDeptName">
            <el-select
              v-model="addForm.archDeptName"
              class="search-input"
              filterable
              size="small"
              placeholder="请选择部门"
              @change="selectDp"
            >
              <el-option
                v-for="item in dpData"
                :key="item.archDeptName"
                :label="item.archDeptName"
                :value="item.archDeptName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" prop="staffName">
            <el-input v-model="addForm.staffName" class="search-input" />
          </el-form-item>
          <el-form-item label="工号" prop="staffCode">
            <el-input
              v-model="addForm.staffCode"
              disabled
              class="search-input"
            />
          </el-form-item>
          <el-form-item label="角色" prop="roleId">
            <el-select v-model="addForm.roleId" style="width: 90%">
              <el-option
                v-for="(item, index) in data"
                :key="index"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式" prop="contactInfo">
            <el-input v-model="addForm.contactInfo" class="search-input" />
          </el-form-item>
          <!-- <el-form-item label="兼职档案专业人员">
            <el-radio v-model="isArch" label="1">是</el-radio>
            <el-radio v-model="isArch" label="2">否</el-radio>
          </el-form-item>
          <el-form-item label="知识体系维护专业人员">
            <el-radio v-model="isKnowPro" label="1">是</el-radio>
            <el-radio v-model="isKnowPro" label="2">否</el-radio>
          </el-form-item> -->
          <el-form-item label="备注">
            <el-input
              v-model="addForm.notes"
              type="textarea"
              :rows="3"
              class="search-input"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="staffDialog = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllArchDept, setManager } from '@/api/archDept'
import {
  qryUserByDept,
  getStaffCode,
  addUser,
  updateUser,
  resetPasswd
} from '@/api/user'
import { roleMenu } from '@/api/roleMenu'
export default {
  data() {
    return {
      isLoading: false,
      curDpIndex: '0',
      searchForm: {
        staffCode: '',
        staffName: ''
      },
      title: '',
      dpData: [],
      dpOptions: [],
      staffData: [],
      addForm: {
        archDeptCode: '',
        archDeptName: '',
        staffCode: '',
        staffName: '',
        contactInfo: '',
        isKnowPro: '',
        notes: '',
        roleId: ''
      },
      isArch: '2',
      oldArch: '',
      isKnowPro: '2',
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      },
      roleDialog: false,
      staffDialog: false,
      selectStaff: {},
      addRules: {
        archDeptName: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        archDeptCode: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        staffName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        staffCode: [{ required: true, message: '请输入工号', trigger: 'blur' }],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
        // contactInfo: [
        //   { required: true, message: '请输入正确联系方式', trigger: 'blur' }
        // ],
      },
      data: []
    }
  },
  created() {
    this.isLoading = true
    this.getAllArchDept()
    this.getAllRoleList()
  },
  methods: {
    // 获取角色列表
    getAllRoleList() {
      roleMenu().then((res) => {
        this.data = res.data
      })
    },
    // 获取部门员工数据
    getAllArchDept() {
      getAllArchDept({ pageNum: -1, pageSize: -1 }).then((res) => {
        if (res.code === '0') {
          const list = [
            {
              archDeptCode: '',
              archDeptName: '全部',
              archDeptId: '',
              createtime: '',
              manager: '',
              managerName: '',
              notes: ''
            }
          ]
          this.dpOptions = list.concat(res.data.records)
          this.dpData = res.data.records
          this.dpOptions.map((item, index) => {
            // el-tab-pane的name只接受string类型不接受int型
            item.index = index.toString()
          })
          this.getData()
        }
      })
    },
    getData() {
      this.isLoading = true
      const { pageNum, pageSize } = this.page
      const param = {
        archDeptCode: this.dpOptions[this.curDpIndex].archDeptCode,
        staffCode: this.searchForm.staffCode,
        staffName: this.searchForm.staffName,
        pageNum: pageNum,
        pageSize: pageSize
      }
      qryUserByDept(param)
        .then((response) => {
          if (response.code === '0') {
            this.staffData = response.data.records
            this.page.total = parseInt(response.data.total)
          }
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 编辑员工信息
    handleEdit(row) {
      this.addForm = {
        ...row
      }
      this.oldArch = row.isArch
      if (row.isArch) {
        this.isArch = '1'
      } else {
        this.isArch = '2'
      }
      if (row.isKnowPro) {
        this.isKnowPro = '1'
      } else {
        this.isKnowPro = '2'
      }
      this.title = '编辑员工信息'
      this.staffDialog = true
    },

    setManager(row) {
      const param = {
        archDeptId: this.dpData[this.curDpIndex].archDeptId,
        staffId: row.staffId,
        archDeptName: row.archDeptName,
        notes: this.dpData[this.curDpIndex].notes,
        manager: row.staffCode
      }
      setManager(param).then((res) => {
        if (res.code === '0') {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getData()
        }
      })
    },
    // 点击新增员工
    handleAdd() {
      getStaffCode({}).then((res) => {
        if (res.code === '0') {
          const curDpIndex = parseInt(this.curDpIndex)
          const deptName = this.dpOptions[curDpIndex].archDeptName === '全部' ? '' : this.dpOptions[curDpIndex].archDeptName
          const deptCode = deptName === '全部' ? '' : this.dpOptions[curDpIndex].archDeptCode
          this.addForm = {
            archDeptCode: deptCode,
            archDeptName: deptName,
            staffName: '',
            staffCode: res.data,
            contactInfo: '',
            notes: ''
          }
          this.title = '新增员工'
          this.staffDialog = true
        }
      })
    },
    submit() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          // if (this.isArch === '2') delete this.addForm.isArch
          // else this.addForm.isArch = '1'
          // if (this.isKnowPro === '2') delete this.addForm.isKnowPro
          // else this.addForm.isKnowPro = '1'
          const param = { ...this.addForm }
          if (this.title === '新增员工') {
            addUser(param).then((res) => {
              if (res.code === '0') {
                this.$message({
                  message: '注册成功',
                  type: 'success'
                })
                this.getData()
                this.staffDialog = false
              }
            })
            return
          }
          updateUser(param).then((res) => {
            if (res.code === '0') {
              if (this.oldArch !== this.isArch) {
                this.$message({
                  message:
                    '如果重新指定某个专业/部门的兼职档案专业人员，请及时联系该平台开发人员，更新员工工号。否则会出现提交数字档案预归档数据规范不合格！',
                  type: 'warning'
                })
              } else {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              }
              this.getData()
              this.staffDialog = false
            }
          })
        }
      })
    },
    selectDp(key) {
      const item = this.dpData.find((dp) => dp.archDeptName === key)
      this.addForm.archDeptCode = item.archDeptCode
      this.addForm.archDeptName = item.archDeptName
    },
    handleReset(row) {
      this.$confirm('此操作将重置该用户密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetPasswd({ username: row.username, type: 2 })
          .then((res) => {
            if (res.code === '0') {
              this.$message({
                type: 'success',
                message: '重置成功!'
              })
            }
          })
          .finally(() => {
            this.getData()
          })
      })
    },
    handleSelect(val) {
      if (val.index !== '0') {
        this.searchForm = {
          staffCode: '',
          staffName: ''
        }
      }
      this.curDpIndex = val.index
      this.getData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getData()
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}
.top-mind {
  margin-bottom: 10px;
  background: #fcf6ed;
  border: 1px solid #f8ecda;
  font-weight: bold;
  padding: 10px;
  border-radius: 6px;
  width: auto;
  color: #dca550;
  font-size: 14px;
}

.left-box {
  flex: 1;
  /* border-right: 1px solid #eee; */
  height: calc(100vh - 100px);
}

.left-top {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  width: auto;
}

.right-box {
  margin-left: 10px;
  flex: 15;
  width: 50%;
}

.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}

.search-input {
  width: 90%;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
</style>
